<template>
  <div>
    <basic-container>
      <ul class="tab_menu">
        <li v-for="(item, index) in tabMenuArr"
            :key="`tabmenu_${index}`"
            @click="tabChange(index)"
            :class="{ active: classActiveNum === index }"
            :style="classActiveNum === index?activesStyle:''">{{ item }}</li>
      </ul>
      <component :is="currentView"></component>
    </basic-container>
  </div>
</template>

<script>
import userList from "./userList.vue";
import rolesList from "./rolesList.vue";
import { mapGetters } from "vuex";
export default {
  name: "userManage",
  components: {
    userList,
    rolesList
  },
  data () {
    return {
      tabMenuArr: ["用户管理", "角色管理"],
      classActiveNum: 0,
      currentView: "userList",
      componentArr: ["userList", "rolesList"]
    };
  },
  computed: {
    ...mapGetters(["theme"]),
    activesStyle () {
      return { "color": this.theme, "border-bottom": "2px solid " + this.theme }
    }
  },
  methods: {
    tabChange (index) {
      this.currentView = this.componentArr[index];
      this.classActiveNum = index;
    }
  }
};
</script>

 <style scoped  >
.tab_menu {
  overflow: hidden;
  margin-bottom: 30px;
  padding-left: 15px;
  background-color: #fff;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
}
.tab_menu li {
  float: left;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  color: #4d4d4d;
  cursor: pointer;
}
.tab_menu li.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
  z-index: 99;
  position: relative;
}
.tab_menu::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ebeef5;
  z-index: 1;
}
</style>
